<template>
    <div class="shoppingde">
        <img src="../../assets/shopping-img/shopping.png" alt="">
        <div class="price">
            <p class="price-left">红豆薏仁粉</p>
            <p class="price-right">￥98</p>
        </div>
        <p class="commodity">商品详细</p>
        <img src="../../assets/shopping-img/sse.png" alt="">
        <p class="characteristic">产品特点</p>
        <div class="selected">
            <div class="selected-y">
                <p class="selected-wenzi">精选</p>
                <p class="selected-img">
                    <img src="../../assets/shopping-img/hongdou.png" alt="">
                </p>
            </div>
            <div class="selected-e">
                <p>沂蒙姑娘精选来自沂蒙地区农家种植的优质红小豆进行严格
                    的人工挑选拣出色泽鲜艳、颗粒饱满的豆子集中运往沂蒙姑
                    娘加工车间进行淘洗、晾干、烘培等一系列加工工艺，确保
                    粉材优质。 </p>

            </div>
        </div>
        <div class="selected">
            <div class="selected-y">
                <p class="selected-wenzi">鲜蘑</p>
                <p class="selected-img">
                    <img src="../../assets/shopping-img/zhima.png" alt="">
                </p>
            </div>
            <div class="selected-e">
                <p>沂蒙姑娘所有的谷物粉都是现加工现磨包装发货的，我们杜
                    绝存储尘粉囤货不做提前加工以确保粉的营养价值最大化我
                    们要做的是给每一位来购买沂蒙姑娘谷物粉的每一个顾客一
                    个满意的答卷。 </p>

            </div>
        </div>
        <div class="selected">
            <div class="selected-y">
                <p class="selected-wenzi">美包</p>
                <p class="selected-img">
                    <img src="../../assets/shopping-img/zhima.png" alt="">
                </p>
            </div>
            <div class="selected-e">
                <p>包装是对一个产品认可最直接的表达，沂蒙姑娘选择包装上
                    从来站在客户的角度上，怎么做到最好做到最服务我们每天
                    都在服务上下功夫，从车间 下线到打包发货我们要做到最优
                    质。 </p>

            </div>
        </div>
        <p class="powder">粉粉</p>
        <p class="ingredients">的主要食材</p>
        <div class="img">
            <div class="imgxs">
                <div class="ximgs">
                    <img src="../../assets/shopping-img/sadf.png" alt="">
                </div>
                <div class="biging">
                    <img src="../../assets/shopping-img/naif.png" alt="">
                </div>
                <div class="ximgs">
                    <img src="../../assets/shopping-img/hongdou.png" alt="">
                </div>
            </div>
        </div>
        <div class="technology">
            <p class="tech1">传统工艺</p>
            <p class="tech2">精细研磨</p>
        </div>
        <p class="englishs">TRADITIONAL PROCESS FINE GRINDING</p>
        <div class="tecBox">
            <div class="tecBox-left">
                <img src="../../assets/shopping-img/dadouzi.png" alt="">
                <p class="tecBox-left-wz">低温烘焙，瞬间熟化工艺</p>
            </div>
            <div class="recBox-right"> 
                <img src="../../assets/shopping-img/mianf.png" alt="">
                <p class="tecBox-left-wz">研磨成粉</p>
            </div>
        </div>
        <div class="addToCart">
            <p class="addcar">加入购物车</p>
            <div class="add1">
                <p class="add-wz">食谱</p>
                <p class="add-p"><img src="../../assets/shopping-img/mianfl.png" alt=""></p>
            </div>
             <div class="add1">
                <p class="add-wz">单品</p>
                <div class="add-p1">
                    <p class="p2">
                        <img src="../../assets/shopping-img/hongdous.png" alt="">
                    </p>
                    <p class="p2">
                        <img src="../../assets/shopping-img/huangdou.png" alt="">
                    </p>
                </div>
            </div>
        </div>
        <router-link to="/shoppingcart" class="iconfont icon-gouwuche gouwuCar" tag="div">
            <p v-if="carTatalNum">{{ carTatalNum }}</p>
        </router-link>
        
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    name:"Shoppingde",
    computed: {
        ...mapGetters({
            carTatalNum: 'car/carTatalNum'
        })
    }
}
</script>

<style scoped>
    .p2{
        width: 0.88rem;
        height: 1.3rem;
        display:inline-block;
        margin-bottom: 0.3rem;
        margin-right: 0.9rem
    }
    .p2 img{
        width: 0.88rem;
        height: 0.84rem;

       margin-top: 0.3rem
    }
    .addcar{
        width: 90%;
        font-size: 0.4rem;
        margin-left: 0.2rem
    }
    .addToCart{
        width: 100%;
        padding-bottom: 0.5rem
    }
    .add-p img{
        width: 2.9rem;
        height: 1.15;
        margin: 0.2rem 0;
    }
    
    .add1{
        width: 100%;
        height: 1.6rem;
        margin-bottom: 0.2rem;
    }
    .add-wz{
        width: 28%;
        height: 100%;
        text-align: center;
        line-height: 1.6rem;
        font-size: 0.30rem;
        display: inline-block
    }
    .add-p,.add-p1{
        width: 70%;
        height: 100%;
        display: inline-block;
    }
    .tecBox{
        width: 100%;
        margin: 0.6rem 0;
    }
    .tecBox-left,.recBox-right{
        width: 48%;
       display:inline-block;
    }
    .tecBox-left img{
        width: 2rem;
        height: 2rem;
        margin-left: 0.8rem
    }
    .recBox-right img{
         width: 2rem;
        height: 2rem;
        margin-left: 1rem
    }
    .tecBox-left-wz{
       text-align: center
    }







    .shoppingde{
        width: 100%;
        height: 100%;
        background-color: #fff;
        position: relative;
    }
    .price{
        width: 100%;
        height: 0.8rem;

    }
    .price-left,.price-right{
        width: 43%;
        height: 100%;
        float: left;
        font-size: 0.4rem;
        margin: 0 0.2rem;
    }
    .price-right{
        color: #ea0a0a;
        text-align: right;
    }
    .commodity{
        text-align: center;
        font-size: 0.26rem;
        text-align: center;
        margin: 0.3rem 0;
    }
    .characteristic{
        margin-top: 0.7rem;
        font-size: 0.26rem;
        text-align: center;
    }
    .selected{
        width: 100%;
        height: 4.5rem;
        margin: 0.7rem 0;
    }
    .selected-y{
        width: 100%;
        height: 2.2rem;
        float: left;
    }
    .selected-wenzi{
        width: 35%;
        float: left;
        height: 100%;
        writing-mode:tb-rl;
        text-align: center;
        font-size: 0.76rem;
        
    }
    .selected-img{
        width: 65%;
        height: 100%;
        float: left;
    }
    .selected-img img{
        width: 1.65rem;
        height: 1.65rem;
        margin: 0.25rem 0.5rem
    }
    .selected-e{
        width: 100%;
        height: 1.5rem;
        float: left;
    }
    .selected-e p{
         width: 5.3rem;
        height: 1.5rem;
        margin: 0 auto;
    }
    .powder{
        width: 100%;
        font-size: 0.36rem;
        text-align: center;
        margin-bottom: 0.2rem;
    }
    .ingredients{
        width: 100%;
        font-size: 0.32rem;
        text-align: center;
    }
    .img{
        width: 100%;
        height: 3.7rem;
        margin-bottom: 1.5rem;
        
    }
    .imgxs{
        width: 6.9rem;
        height: 100%;
        margin: 0.5rem auto;
    }
    .ximgs{
        width: 1.7rem;
        height: 1.7rem;
        margin-bottom: 0.1rem;
        float: left;
    }
    .ximgs img{
        width: 100%;
        height: 100%;
       margin-top: 1rem;
    }
    .biging{
        width: 3.2rem;
        height: 3.2rem;
        float: left;
    }
    .technology{
        width: 100%;
        height: 0.6rem;
        margin-bottom: 0.05rem;
        margin-top: 0.2rem;

    }
    .tech1,.tech2{
        width: 46%;
        height: 100%;
        float: left;

        line-height: 0.6rem;
        font-size: 0.48rem; 
    }
    .tech1{
        text-align: right;
        margin-right: 0.2rem
    }
    .tech2{
        text-align:left;
        margin-left: 0.2rem
    }
    .englishs{
        width: 100%;
        font-size: 0.14rem;
        text-align: center
    }
   
</style>